<template>
  <div>
    <el-table ref="table"
              :data="tableData"
              @expand-change="getIPTCON"
              style="width: 100%; margin-top: 0">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="6">
              <el-tree :data="dataTree"
                       ref="treeRef"
                       default-expand-all
                       show-checkbox
                       :default-checked-keys="checkedArr"
                       node-key="id">
              </el-tree>
            </el-col>
            <el-col :span="18">
              <el-button type="primary"
                         @click="distributeTower(scope.row)">确定分配</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column prop="username"
                       label="姓名"
                       width="180">
      </el-table-column>
      <el-table-column prop="studentNum"
                       label="学号"
                       width="180">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="180">
      </el-table-column>
      <el-table-column prop="role"
                       width="460"
                       label="角色">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.role"
                          @change="permissinChange(scope.row.studentNum,scope.row.role)">
            <el-radio-button label="超级管理员"></el-radio-button>
            <el-radio-button label="宿舍管理员"></el-radio-button>
            <el-radio-button label="学生卫生纪检员"></el-radio-button>
            <el-radio-button label="学生"></el-radio-button>
          </el-radio-group>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

export default {
  name: 'controlTableIPT',
  props: {
    tableData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      dataTree: [
        {
          id: 1,
          label: '桃园',
          children: [
            {
              id: '桃园1',
              label: '桃园1'
            }, {
              id: '桃园2',
              label: '桃园2'
            }, {
              id: '桃园3',
              label: '桃园3'
            }, {
              id: '桃园4',
              label: '桃园4'
            }, {
              id: '桃园5',
              label: '桃园5'
            }, {
              id: '桃园6',
              label: '桃园6'
            }
          ]
        },
        {
          id: 2,
          label: '兰园',
          children: [
            {
              id: '兰园1',
              label: '兰园1'
            }, {
              id: '兰园2',
              label: '兰园2'
            }, {
              id: '兰园3',
              label: '兰园3'
            }, {
              id: '兰园4',
              label: '兰园4'
            }, {
              id: '兰园5',
              label: '兰园5'
            }, {
              id: '兰园6',
              label: '兰园6'
            }
          ]
        },
        {
          id: 3,
          label: '荔园',
          children: [
            {
              id: '荔园1',
              label: '荔园1'
            }, {
              id: '荔园2',
              label: '荔园2'
            }, {
              id: '荔园3',
              label: '荔园3'
            }, {
              id: '荔园4',
              label: '荔园4'
            }, {
              id: '荔园5',
              label: '荔园5'
            }, {
              id: '荔园6',
              label: '荔园6'
            }
          ]
        }
      ],
      checkedArr: []
    }
  },

  methods: {
    // 修改权限
    permissinChange (studentNum, newRole) {
      const role = newRole === '超级管理员' ? 'admin' : newRole === '宿舍管理员' ? 'general' : newRole === '学生卫生纪检员' ? 'inspector' : 'student'
      // console.log(role)
      this.$confirm(`此操作将修改该用户权限为${newRole}，是否继续？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$axios.post('users/permissinChange', {
          studentNum,
          role
        })
        if (res.code !== -1) {
          const { data: resDelete } = await this.$axios.get('users/iptDelete', {
            params: {
              studentNum
            }
          })
          if (resDelete.code !== -1) {
            this.$message({
              type: 'success',
              message: `修改角色成功！该用户角色修改为为${newRole}，且已成功删除学生卫生纪检员相关权限`
            })
          }
        }
      }).catch(() => {
        this.serchTableData = []
        this.defaultRole = '学生'
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    // 给宿检员分配楼宇
    async distributeTower (row) {
      const towers = this.$refs.treeRef.getCheckedKeys()
      if (towers.indexOf(1) > -1) {
        towers.splice(towers.indexOf(1), 1)
      } else if (towers.indexOf(2) > -1) {
        towers.splice(towers.indexOf(2), 1)
      } else if (towers.indexOf(3) > -1) {
        towers.splice(towers.indexOf(3), 1)
      }
      const { data: res } = await this.$axios.get('/users/iptAllowTower', {
        params: {
          inspector: row.username,
          studentNum: row.studentNum,
          towers: towers.join(',')
        }
      })
      // console.log(res)
      if (res.meta.code !== -1) {
        this.$message.success(res.meta.msg)
      } else {
        this.$message.error(res.meta.msg)
      }
    },
    // 获取宿检员拥有的楼宇权限
    async getIPTCON (row) {
      this.checkedArr = []
      const { data: res } = await this.$axios.get('users/iptFindTower', {
        params: {
          studentNum: row.studentNum
        }
      })
      // console.log(res.result[0].towers)
      if (res.meta.code !== 200) {
        this.$message.warning(res.meta.msg)
      } else {
        this.checkedArr = res.result[0].towers.split(',')
      }
    }
  }
}
</script>
<style lang='' scoped>
</style>
